/*
 * Copyright 2017 Red Hat, Inc. and/or its affiliates.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *       http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "/org/uberfire/client/views/static/uberfire-variables.less";

.library {

    background-color: @color-pf-black-150;
    height: 100%;

    //Status colors
    .status-ok-kie {
        color: @color-pf-light-green;
    }

    //Circle Icons
    // Includes :hover
    .circle-icon-kie {
        background-color: @color-pf-black-150;
        font-size: 15px;
        font-weight: 400;
        height: 2.5em;
        line-height: 2.5em;
        margin: .5em;
        width: 2.5em;
        -webkit-border-radius:50%;
        -moz-border-radius:50%;
        border-radius:50%;
        &:hover {
            background-color: @color-pf-black-600;
            color: @color-pf-white;
        }
    }

    // Toolbars
    .row-toolbar-kie {
        padding: .25em;
        background-color: @color-pf-white;
        border-collapse: collapse;
    }

    .toolbar-pf {
        padding: .8em 1em;
    }

    .toolbar-kie {
        display:flex;
    }

    .toolbar-pf .form-group,
    .toolbar-pf .btn-group {
        margin-bottom: 0;
        display: flex;
    }

    .toolbar-pf .form-group:last-of-type {
        border-right: none;
    }

    // Toolbar has a title
    .toolbar-title-kie {
        font-size: 2em;
        margin-right: 1em;
    }

    // Toolbar has other items on the right
    .toolbar-right-kie {
        float:right;
    }

    .toolbar-element-kie {
        display: inline-block;
        margin-top: auto;
        margin-bottom: auto;
    }

    .dropdown-minimal-kie {
        background: none;
        border: none;
        box-shadow: none;
    }

    .dropdown-kebab-pf .dropdown-menu-right {
        left: auto;
        right: 0;
    }

    .toolbar-btn-group-kie {
        float:right;
    }

    // TOOLBAR
    // move the button group to the right on narrower screens
    .btn-group-kie-right {
        float:right;
    }

    //so the placeholder text doesn't get cut off
    .toolbar-pf-filter {
        min-width: 18em;
    }

    // Title for toolbar inside content section
    .toolbar-data-title-container-kie {
        display: flex;
        float: left;
        align-items: inherit;
        margin-right: 1em;
        white-space: nowrap;
        line-height: 1.5;
        max-width: 1030px;
    }

    .toolbar-data-title-container-kie input[type="text"] {
        display: inline-block;
        width: 500px;
        margin-right: 8px;
    }

   .toolbar-data-title-kie {
       font-size: 1.5em;
       margin: 0px 8px 0px 0px;
   }
   .toolbar-data-icon-kie {
       color: #363636;
       font-size: 12px;
       cursor: pointer;
   }

   .toolbar-data-description-kie {
       font-size: 13px;
       text-overflow: ellipsis;
       overflow: hidden;
       max-width: 100%;
       color: #363636;
       margin: 0px 8px 0px 0px;
       cursor: pointer;
    }
    // Add space to left of kebab; have to override specificity
    .dropdown-kebab-pf {
        margin-left: 1em !important;
    }

    // add some vertical space if toolbar pieces are stacked
    .input-group-kie {
        margin-bottom: .5em;
    }

    // Page Content
    .page-content-kie {
        background-color: @well-bg;
        padding-bottom: 1em;
    }

    .main-content-kie {
        box-shadow: 0 1px 1px fade(@color-pf-black, 17.5%);
    }

    // Makes a big card-looking button
    .button-card-kie {
        background-color: inherit;
        box-shadow: none;
        min-width: 10em;
        padding: 1em;
        height: 10em;
        width: 15em;
        white-space: normal;
        &:hover .circle-icon-kie {
            background-color: @color-pf-black-600;
            color: @color-pf-white;
        }
        .text {
            position: absolute;
            width: 13em;
        }
    }

    // Add this to the .fa-code-fork icon to make the process-flow icon
    .fa-process-flow-kie {
        transform: rotate(90deg);
    }

    // Add this to the .fa-external-link-suqare icon to make the process-flow icon
    .fa-imported-kie {
        transform: rotate(180deg);
    }

    // A link to the right side of a card's title
    .card-title-link-kie {
        margin-left: .5em;
    }

    .card-pf-heading-link-kie {
        padding: 20px 0;
    }

    .card-pf-footer {
        padding-bottom: 20px;
    }

    //Change default dl to have a left justified dd
    .name-list-kie dt {
        text-align: left;
        font-weight:normal;
    }

    // Adds a checkbox icon before
    // Used for indicating status rather than clickable checkboxes
    .checked-kie {
        &:before {
            content: @fa-var-check-square-o;
            font-family: FontAwesome;
            margin-right: .25em;
        }
    }

    .unchecked-kie {
        &:before {
            content: @fa-var-square-o;
            font-family: FontAwesome;
            margin-right: .25em;
        }
    }

    // Adjust width of list-view items to make more space for the description and heading
    @media (min-width: @screen-md-min) {
        .list-view-pf-description {
            width: 85%;
        }
        .list-view-pf-additional-info {
            flex: 0 0 auto; // it covers whats left from summary
            float: left; // IE9 fallback
            width: 15%; // IE9 fallback
        }
        .list-view-pf .list-group-item-heading {
            -ms-flex: 1 0 calc(~'70% - 20px'); // IE10 fallback
            flex:     1 0 calc(~'70% - 20px');
            width: calc(~'70% - 20px'); // IE9 fallback
        }
        .list-view-pf .list-group-item-text {
            -ms-flex: 0 0 calc(~'25% - 20px'); // IE10 fallback
            flex:     0 0 calc(~'25% - 20px');
            width: calc(~'25% - 20px'); // IE9 fallback
        }
    }

    //selector length needed to override specificity
    // Adjust size of the circle so that the icon fits nicely
    .list-view-pf-left .fa.list-view-pf-icon-sm,
    .circle-icon-kie {
        height: 2em;
        line-height: 2em;
        width: 2em;
        display: flex;
        justify-content: center;
        align-items: center;
        margin: .5em auto;
    }

    .list-view-pf-left .fa.list-view-pf-icon-sm img,
    .circle-icon-kie img {
        width: 1em;
        height: auto;
    }

    .toolbar-pf-actions {
        margin-bottom: 0;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .dropdown-kebab-pf {
        margin-left: 0 !important;
    }

    .bold-font {
        font-weight: bold;
        /* i cannot override flex size check with designers*/
    }

    .normal-font {
        font-weight: normal;
        /* i cannot override flex size check with designers*/
    }

    a {
        cursor: pointer;
    }

    .resource-handler-container {
        max-width: 45em;
        margin: 3em auto;
        position: relative;
        overflow: hidden;
    }

    .resource-handler-container.retracted {
        height: 10em;
    }

    .list-item-container.selected {
        background-color: @color-pf-black-150;
    }

    .form-group.actions {
        text-align: right;
    }

    .list-view-pf-view {
        margin-top: 0;
    }

    .btn-group button {
        margin: 0px 4px;
    }

    .btn-group .separator-left {
        margin-left: 4px !important;
        padding-left: 8px;
        border-left: 1px solid #d1d1d1;
    }

    .dropdown-kebab-pf .large {
        width: 18em;
    }

    .fixed-header {
        position: fixed;
        width: 100%;
        z-index: 10;
    }

    .fixed-header + .page-content-kie {
        padding-top: 4em;
    }

    .page-content-kie:after {
        content: " ";
        display: table;
        clear: both;
    }

    .kie-background--settings {
        background-color: @well-bg;
    }

    .kie-badge--circle {
        background-color: @color-pf-black-300;
        border-radius: 50%;
        font-size: large;
        color: @color-pf-black-900;
        height: 2em;
        width: 2em;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .required:after {
        content: "*";
        font-size: 80%;
        padding-left: 2px;
        padding-right: 5px;
        color: rgb(185, 74, 72);
        vertical-align: super;
    }

    .main-container .toolbar-pf {
        background-color: @color-pf-black-150;
        padding: .8em 0;
        border: 0;
    }

    .toolbar-pf .form-group {
        padding: 0;
    }

    [hidden] {
        display: none !important;
    }

    .card-pf-body {
        display: flex;
        min-height: 100px;
        justify-content: space-between;
        align-items: center;
    }

    .card-pf-view .card-pf-title {
        margin: 0;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    .card-pf-body-title {
        overflow: hidden;
    }

    .card-pf-view .card-pf-contributors {
        color: @color-pf-black-500;
        min-height: 16px;
    }

    .card-pf-icon-circle {
        border: 3px solid @color-pf-blue-500;
        border-radius: 50%;
        color: @color-pf-blue-500;
        display: block;
        font-size: 16px;
        font-weight: bold;
        height: 48px;
        line-height: 44px;
        margin: 0 auto;
        text-align: center;
        width: 48px;
    }

    .card-pf-body .right {
        float: right;
        margin-left: 1em;
    }

    .card-pf-body h5 {
        -o-text-overflow: ellipsis;
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
        width: 100% !important;
    }

    .kie-page-header {
        margin: 0;
    }

    .active .badge {
        background-color: @color-pf-blue-400;
    }

    .blank-slate-pf {
        background-color: @color-pf-white;
    }

    .nav-tabs {
        margin-bottom: 10px;
    }

    .nav-tabs.nav-tabs-library {
    	background-color: white;
    	padding: 0 20px 0 20px;
    }
}